<template>
    <div class="main">
        <a-form :inline="false" :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" size="small"
            labelAlign="left">
            <a-collapse v-model="activeKey">
                <a-collapse-panel key="1">
                    <span slot="header" class="collapseHeader">
                        <a-icon type="setting" />基本设置
                    </span>
                    <a-form-item label="节点ID">
                        <a-input :disabled="onlyRead" v-model="formData.id"></a-input>
                    </a-form-item>
                    <a-form-item label="节点名称">
                        <a-input :disabled="onlyRead" v-model="formData.name"></a-input>
                    </a-form-item>
                    <a-form-item label="节点描述">
                        <a-textarea placeholder="请输入描述" v-model="formData.documentation"
                            :autoSize="{minRows: 2, maxRows: 5}" />
                    </a-form-item>
                    <a-form-item label="节点表单">
                        <a-select placeholder="请选择" v-model="formData.formId" allowClear>
                            <a-select-option v-for="item in fromList" :key="item.formId">
                                {{ item.formName }}--{{item.formId}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-collapse-panel>
            </a-collapse>
        </a-form>
    </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel"
export default {
    mixins: [mixinPanel],
    props: {
        onlyRead: {
            type: Boolean,
            default: false
        },
        fromList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            formData: {
                id: '',
                name: '',
                code: '',
                description: ''
            }
        }
    },
    methods: {},
    created() {
        const cache = {
            ...this.element.businessObject,
            ...this.element.businessObject.$attrs
        }
        // 移除flowable前缀，格式化数组
        for (const key in cache) {
            if (key.indexOf('flowable:') === 0) {
                const newKey = key.replace('flowable:', '')
                cache[newKey] = cache[key]
                delete cache[key]
            }
        }
        this.formData = cache
    }
}
</script>

<style>

</style>